<!DOCTYPE HTML>
<html>
<head>
<script>
	/*
	function myTree(canvas, context, startX, startY, level)
	{
		if (level < 4)
		{
			var topX = startX;
			var topY = 10;
			
			context.beginPath();
			context.moveTo(startX, startY);
			context.lineTo(topX, topY);
			
			var middleY = (startY + topY) / 2;
			
			var width = (canvas.width - topY) / 2;
			var leftX = startX - width;
			var rightX = startX + width;
			
			context.moveTo(leftX, middleY);
			context.lineTo(rightX, middleY);
			context.stroke();
		}
	}
	*/
	
	var DEPTH = 4;
	
	function myTree1(canvas, context, startX, startY, level)
	{
		if (level < DEPTH)
		{
			//context.arc(startX, startY, 0, Math.PI*2, false);
			
			var topX = startX;
			var topY = 10;
			
			context.beginPath();
			context.moveTo(startX, startY);
			context.lineTo(topX, topY);
			
			//right
			var middleY = (startY + topY) / 2;
			
			var rightX = startX + (middleY)/2;
			context.moveTo(startX, middleY);
			context.lineTo(rightX, middleY);
			context.lineTo(rightX, topY);
			context.stroke();
			
			var leftX = startX - (middleY)/2;
			context.moveTo(startX, middleY);
			context.lineTo(leftX, middleY);
			context.lineTo(leftX, topY);
			context.stroke();
			
			myTree1(canvas, context, leftX , middleY, level + 1);
			myTree1(canvas, context, rightX, middleY, level + 1);
		}
	}
	function drawBranches( context, startX, startY, trunkWidth, level)
	{
		if (level < 12)
		{
			var changeX = 100 / (level + 1);
			var changeY = 200 / (level + 1);
			
			var topRightX = startX + Math.random() * changeX;;//changeX/2; //
			var topRightY = startY - Math.random() * changeY;;//changeY/2; //
			
			var topLeftX = startX - Math.random() * changeX;;//changeX/2;//
			var topLeftY = startY - Math.random() * changeY;;//changeY/2;//
			
			//draw right branch
			context.beginPath();
			context.moveTo(startX + trunkWidth / 4, startY);
			context.quadraticCurveTo(startX + trunkWidth / 4, startY - trunkWidth, topRightX, topRightY);
			context.lineWidth = trunkWidth;
			context.lineCap = "round";
			context.stroke();
			
			context.beginPath();
			context.moveTo(startX - trunkWidth / 4, startY);
			context.quadraticCurveTo(startX - trunkWidth / 4, startY - trunkWidth, topLeftX, topLeftY);
			context.lineWidth = trunkWidth;
			context.lineCap = "round";
			context.stroke();
			
			drawBranches(topRightX, topRightY , trunkWidth * 0.7, level+1);
			drawBranches(topLeftX , topLeftY  , trunkWidth * 0.7, level+1);
		}
	}
	window.onload = function(){
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		myTree1(canvas, context, canvas.width/2, canvas.height, 0);
	}
</script>
</head>
<body>
	<canvas id="myCanvas" width="800" height="500" style="border:1px solid black;">
	</canvas>
</body>
</html>